<template>
  <div>
    <Header/>

    <div id="main">
      <article style="padding-top: 20px;">
        <div class="lbox">
          <div class="content_box whitebg">
            <h2 class="htitle">
              <span class="con_nav">
                您现在的位置是：<router-link to="/">网站首页</router-link>&gt;<span>新闻资讯</span>
              </span>新闻资讯
            </h2>

            <h1 class="con_tilte">{{info.title}}</h1>

            <p class="bloginfo">
              <i class="avatar"><img :src="info.user.avatar"></i>
              <span>{{info.user.name}}</span>
              <span>{{info.creatTime}}</span>
              <span>{{info.readCount}}人已围观</span>
            </p>

            <p class="con_info"><b>摘要</b>{{info.summary}}</p>

            <div class="con_text">
              <div v-html="info.content"></div>
            </div>

            <p><span class="diggit">到底咯</span></p>
          </div>
        </div>

        <Right/>
      </article>
    </div>

    <Footer/>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { detailsGetInformation } from '@/api/information'
  import Header from '../common/Header.vue'
  import Footer from '../common/Footer.vue'
  import Right from '../common/Right.vue'

  export default {
    computed: {
      ...mapGetters([
        'userId',
      ])
    },
    components: {
      Header,
      Footer,
      Right,
    },
    data() {
      const validateData = (rule, value, callback) => {
        if (value == null || value.length == 0) {
          callback(new Error('必填项不能为空'));
        } else {
          callback();
        }
      }
      return {
        info: {},
      }
    },
    watch: {
      '$route' (to, from) {
        if (to.name == 'information-details') {
          this.detailsGetInformation(to.params.id)
        }
      }
    },
    created() {
      this.detailsGetInformation(this.$route.params.id)
    },
    methods: {
      // 查询数据
      detailsGetInformation(id) {
        this.loading = true
        detailsGetInformation(id).then(response => {
          this.info = response.data
          this.loading = false
        })
      },
    }
  }
</script>
